<template>
	<div class="discover">
		<div class="life">
			<div class="title">
				<span class="tit">{{title}}</span>
			</div>
			<ul class="clearfix"  >
				<li v-for="item in ad"><a href="http://www.baidu.com"><img src="{{item.imgSrc}}" alt=""></a></li>
			</ul>
		</div>
		<list-box></list-box>

	</div>

</template>

<script>
	import common from '../../../utils/common';
    import listBox from './../common/listbox';

    export default {
    	data: function () {
    		return {
    			title:'',
    			ad:'',
    			recommend:''
    		}
    	},
    	route:{
    		data: function(){    			
    			this.$http.get( common.isdev() + '/cxb/app/discover/index.shtml',{}).then(function ( data ) {
    					var cityId = this.$route.params.cityid,
    						cityData = JSON.parse(data.body);
    						this.title = cityData[cityId].title;
    						this.ad = cityData[cityId].ad;
    						this.recommend = cityData[cityId].recommend;
    						this.$broadcast('listData',this.recommend);
					},function(){

					});
    		}
    	},
    	ready:function(){

    	},
        components:{listBox},
        event:function(){

        }
    }
</script>

<style lang="scss">
@import "../../../assets/css/_functions.scss";
@import "../../../assets/css/_variables.scss";
.discover{
	.life{
		text-align:center;
		background:$_fff;
		span.tit{
			display:inline-block;
			color:$_243742;
			padding:rem(19) 0;
			font-size:rem(15);
			background:$_fff;
			&:before{
				border:1px solid #e6ded4;
				content: "";
				width:rem(35);
				display:block;
				position: relative;
				top:rem(9);
				left:rem(-49);

			}
			&:after{
				border:1px solid #e6ded4;
				content: "";
				width:rem(35);
				display:block;
				position: relative;
				top:rem(-9);
				right:rem(-75);

			}
		}
		ul{
			padding:rem(0) 0 rem(8) rem(5);
			background:$_fff;
			li{
				width:rem(180);
				height:rem(96);
				background:#ccc;
				margin-bottom:rem(5);
				margin-right:rem(5);
				flex-wrap:wrap;
				float: left;
				overflow: hidden;
				img{
					width:100%;					
				}
			}
		}
	}
}

</style>
